<template>
  <div class="edit-box">
  <el-form label-width="120px" class="form-grid" :model="formData">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form-item label="反馈ID"><el-input v-model="formData.id" readonly /></el-form-item>
        <el-form-item label="昵称"><el-input v-model="formData.nickname" readonly /></el-form-item>
        <el-form-item label="电话"><el-input v-model="formData.phone_number" readonly /></el-form-item>
        <el-form-item label="申请时间"><el-input v-model="formData.create_time" readonly /></el-form-item>
        <el-form-item label="反馈内容"><el-input v-model="formData.content" readonly /></el-form-item>
        <el-form-item label="反馈图片">
          <ImagesCell :src="formData.images" :width="50" :height="50" shape="square" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="回复" class="full-width">
      <el-input type="textarea" v-model="remark" :rows="3" placeholder="请输入回复..." />
    </el-form-item>

    <el-form-item class="btn-group">
      <el-button type="success" @click="onsubmit">回复</el-button>
    </el-form-item>
  </el-form>
  </div>
</template>

<script>
  import {
    APPROVAL_STATUS
  } from '@/constants/statusMap';
  import ImagesCell from "@/components/ImagesCell.vue";
export default {
  name: "ReviewDetail",
  props: {
    formData: {
      type: Object,
      required: true
    }
  },
  components: {
   ImagesCell
  },
  data() {
    return {
      APPROVAL_STATUS,
      remark: ''
    };
  },
  computed: {

  },
  methods: {
    onsubmit(){
      if(this.remark.length<3){
        this.$message.error('回复内容不能小于3个字符')
        return false
      }
      let params={}
      params.feedback_id=this.formData.id
      params.user_id=this.formData.user_id
      params.content=this.remark
      this.$emit('approve',params);
    }



  }




};
</script>

<style scoped>
  .edit-box{
    box-sizing: border-box;
    padding: 10px 40px 20px 10px;
  }
.form-grid .el-form-item {
  margin-bottom: 20px;
}
.full-width{
  margin-top: 20px;
}
.full-width .el-input {

  width: 100%;
}
.btn-group {
  text-align: center;
}
</style>
